<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>我的收益</title>
	<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
	<style>
		body {
			width: 100%;
			height: 100%;
			background-color: #f5f5f5;
		}

		#yield .header {
			width: 100%;
			box-sizing: border-box;
			background-image: linear-gradient(45deg,
		#ff3a24 0%,
		#ff5340 100%);
		}

		#yield .header .header_top {
			background-image: linear-gradient(45deg,
		#ff3a24 0%,
		#ff5340 100%);
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			height: 44px;
			text-align: center;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			color:#fff;
		}

		#yield .header .header_top img {
			width: 22px;
			height: 22px;
			position: absolute;
			left: 15px;
		}

		#yield .header .header_bot {
			width: 100%;
			padding: 20px 15px 35px 40px;
			box-sizing: border-box;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		#yield .header .header_bot .left {
			display: flex;
			flex-direction: column;
		}

		#yield .header .header_bot .left .left_tp {
			font-size: 14px;
			line-height: 14px;
			margin-bottom: 10px;
		}

		#yield .header .header_bot .left .left_bt {
			font-size: 25px;
			font-weight: bold;
			line-height: 25px;
		}

		#yield .header .header_bot .right {
			display: flex;
		}

		#yield .header .header_bot .right div {
			width: 60px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border: 2px solid #ffffff;
			border-radius: 30px;
			font-size: 12px;
		}

		#yield .header .header_bot .right .active {
			background-color: #ffffff;
			color: #333333;
		}

		#yield .header .header_bot .right .right_btn {
			margin-right: 10px;
		}

		.one_style {
			padding: 0 15px;
			width: 100%;
			box-sizing: border-box;
		}

		.one_style .title {
			margin: 20px 0 10px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			color: #999999;
		}

		.one_style .title .title_left {
			color: #333;
		}

		.one_style .title .title_right img {
			width: 6.5px;
			height: 11.5px;
			margin-left: 10px;
		}

		.one_style .box {
			min-height: 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 18.5px 10px 22.5px;
			background-color: #ffffff;
			border-radius: 10px;
		}

		.one_style .box div {
			font-size: 12px;
			line-height: 20px;
			text-align: center;
			width: 50%;
		}

		.one_style .box div span {
			font-weight: bold;
			font-size: 16px;
			line-height: 20px;
		}

		.month_details {
			background: #ffffff;
			border-radius: 10px;
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
		}

		.month_details .det_box {
			padding: 25px 0 20px;
			width: 50%;
			text-align: center;
			font-size: 10px;
			color: #999999;
			position: relative;
		}

		.month_details .det_box .det_top {
			font-size: 20px;
			line-height: 20px;
			color: #333;
			font-weight: bold;
		}

		.month_details .det_box div:last-child {
			line-height: 12px;
			margin-top: 7.5px;
		}

		.month_details .det_box:nth-child(2n+1)::after {
			content: '';
			display: block;
			width: 1px;
			height: 25px;
			border-radius: 3px;
			background-color: #f5f5f5;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		.month_details .det_box:nth-child(1)::before {
			content: '';
			display: block;
			width: 25px;
			height: 1px;
			border-radius: 3px;
			background-color: #f5f5f5;
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
		}

		.month_details .det_box:nth-child(2)::before {
			content: '';
			display: block;
			width: 25px;
			height: 1px;
			border-radius: 3px;
			background-color: #f5f5f5;
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
		}
	</style>
</head>

<body style="background-color: #f5f5f5;padding-bottom: 50px">
	<div id="yield">
		<div class="header">
			<div class="header_top">
				<img src="../../../image/icon_return_white.png" alt="" onclick="back()">我的收益
			</div>
			<div class="header_bot">
				<div class="left">
					<span class="left_tp">账户余额</span>
					<span class="left_bt">0.00</span>
				</div>
				<div class="right">
					<div class="right_btn" onclick="income_bill()">明细</div>
					<div class="active" onclick="income_withdraw()">提现</div>
				</div>
			</div>
		</div>
		<div class="one_style">
			<div class="title">
				<div class="title_left">累计订单补贴</div>
			</div>
			<div class="box order">

			</div>
			<div class="title">
				<div class="title_left">累计粉丝贡献</div>
			</div>
			<div class="box fans_lj">

			</div>
			<div class="title">
				<div class="title_left">粉丝预绑奖励</div>
			</div>
			<div class="box fans_yb">

			</div>
			<div class="title">
				<div class="title_left">粉丝首单奖励</div>
			</div>
			<div class="box fans_sd">

			</div>
		</div>
		<div class="one_style">
			<div class="title">
				<div class="title_left">累计收益统计</div>
			</div>
			<div class="month_details">

			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
	let member_info;
	apiready = function () {
		resume("my_income");

		api.addEventListener({
			name: 'viewappear'
		}, function (ret, err) {
			get_member_info()
		});

		$api.dom('.header_bot').style.paddingTop = $api.fixStatusBar($api.dom('.header_top')) + 15 + 'px';

		getBill();

		get_member_info();
	};

	function get_member_info() {
		$api.ajax({
			url: 'api/member/info',
			method: 'get',
		}, function (ret) {
			api.setGlobalData({
				key: 'member_info',
				value: ret.data.info,
			});
			member_info = ret.data.info
			$api.html($api.dom(".header_bot .left_bt"), (member_info.wallet / 100 ? member_info.wallet / 100 : "0.00"))
		});
	}

	function getBill() {
		$api.ajax({
			url: 'api/member/bill',
			method: 'get',
		}, function (ret) {
			let data = ret.data.info;
			//累计
			let order = `<div>订单数：<span>` + data.primary_orders + `</span></div>
				<div>金额（元）：<span>`+ (data.primary_income / 100 ? data.primary_income / 100 : "0.00") + `</span></div>`;
			let fans_lj = `<div>订单数：<span>` + data.secondary_orders + `</span></div>
					<div>金额（元）：<span>`+ (data.secondary_income / 100 ? data.secondary_income / 100 : "0.00") + `</span></div>`
			let fans_yb = `	<div>预绑数：<span>` + data.secondary_bind_bills + `</span></div>
					<div>金额（元）：<span>`+ (data.secondary_bind_income / 100 ? data.secondary_bind_income / 100 : "0.00") + `</span></div>`;
			let fans_sd = `<div>订单数：<span>` + data.secondary_extra_orders + `</span></div>
					<div>金额（元）：<span>`+ (data.secondary_extra_income / 100 ? data.secondary_extra_income / 100 : "0.00") + `</span></div>`;
			let month_details = `
				<div class="det_box">
					<div class="det_top">`+ (data.today_income / 100 ? data.today_income / 100 : "0.00") + `</div>
					<div>今日收益(元)</div>
				</div>
				<div class="det_box">
					<div class="det_top">`+ (data.yesterday_income / 100 ? data.yesterday_income / 100 : "0.00") + `</div>
					<div>昨日收益(元)</div>
				</div>
				<div class="det_box">
					<div class="det_top">`+ (data.week_income / 100 ? data.week_income / 100 : "0.00") + `</div>
					<div>近7日收益(元)</div>
				</div>
				<div class="det_box">
					<div class="det_top">`+ (data.month_income / 100 ? data.month_income / 100 : "0.00") + `</div>
					<div>近30日收益(元)</div>
				</div>`;
			$api.html($api.dom(".order"), order);
			$api.html($api.dom(".fans_lj"), fans_lj);
			$api.html($api.dom(".fans_yb"), fans_yb);
			$api.html($api.dom(".fans_sd"), fans_sd);

			$api.html($api.dom(".month_details"), month_details);
		});
	}
	function income_withdraw() {
		if (member_info.wallet / 100 < 1) {
			api.toast({
				msg: '账户余额没有满足最低提现金额（1元）不能提现',
				duration: 3000,
				location: 'middle'
			});
		} else {
			api.openTabLayout({
				name: 'income_withdraw',
				url: './income_withdraw.html',
				useWKWebView: true,
				bgColor: '#fff',
			})
		}
	}

	function income_bill() {
		api.openTabLayout({
			name: 'income_bill',
			url: './income_bill.html',
			useWKWebView: true,
			bgColor: '#fff',
		})
	}

	function back() {
		api.closeWin({
		});
	}

</script>

</html>
